<mat-list-item class="container"
               [ngClass]="{
                 'priority-normal': item.priority === 3,
                 'priority-important': item.priority === 2,
                 'priority-emergency': item.priority === 1
               }"
>
  <mat-checkbox class="completion-status" [checked]="item.completed"></mat-checkbox>
  <!-- ngClass->当里面的表达式满足时给dom添加相应样式 -->
  <div mat-line class="content" [ngClass]="{'completed': item.completed}">
    <span matTooltip="{{item.desc}}">{{item.desc}}</span>
  </div>
  <div mat-line class="bottom-bar">
    <span class="due-date" *ngIf="item.dueDate">
      {{item.dueDate | date: "yy-MM-dd"}}
    </span>
    <mat-icon *ngIf="item.reminder">alarm</mat-icon>
  </div>
  <mat-icon class="avatar" [svgIcon]="avatar" mat-list-avatar></mat-icon>
</mat-list-item>
